<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('发射机指令下发')"/>
</head>
<style>
    .layui-form-label {
        width: 300px !important;
        text-align: left !important;
    }

    .layui-form-item .layui-input-inline {
        width: 300px !important;
        margin-bottom: 0px !important;
    }

    .layui-form-item-te {
        margin-bottom: 0px !important;
    }
</style>
<body class="pear-container">

<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-tab layui-tab-card" lay-filter="myTab">
            <ul class="layui-tab-title">
                <li class="layui-this">通讯参数设置</li>
                <li>发射机任务下发</li>
                <li>运行参数设置</li>
                <li>功能参数设置</li>
                <li>时钟校准</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show" id="communication">
                </div>
                <div class="layui-tab-item" id="playTask">
                    <span>发射机任务下发</span>
                </div>
                <div class="layui-tab-item" id="setstatus">
                    <span>运行参数设置</span>
                </div>
                <div class="layui-tab-item" id="setfunction">
                    <span>功能参数设置</span>
                </div>
                <div class="layui-tab-item" id="clock">
                    <span>时钟校准</span>
                </div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <label for="stationCode"></label><input id="stationCode" name="stationCode"  th:type="hidden" th:value="${stationCode}">
        <label for="transCode"></label><input id="transCode" name="transCode"  th:type="hidden" th:value="${transCode}">
    </div>
</div>
</body>
<th:block th:include="include :: footer"/>
<script>
    let stationCode = $('#stationCode').val();
    let transCode = $('#transCode').val();
    layui.use(['table', 'form', 'jquery', 'element', 'util','layer'], function () {
        let table = layui.table;
        let form = layui.form;
        let element = layui.element;
        let layer = layui.layer;

        layer.ready(function(){
            $("#stationCode").val(GetQueryString("stationCode"));
            $("#transCode").val(GetQueryString("transCode"));
            createIframe("../view/communication?stationCode="+$("#stationCode").val()+"&&transCode="+$("#transCode").val(),"communication");
        });

        function GetQueryString(name) {
            const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            const r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        element.on('tab(myTab)', function (data) {
            let src = "";
            let id = "";
            switch (data.index) {
                case 0:
                    src = "../view/communication?stationCode="+$("#stationCode").val()+"&&transCode="+$("#transCode").val();
                    id = "communication";
                    break;
                case 1:
                    src = "../view/playTask?stationCode="+$("#stationCode").val()+"&&transCode="+$("#transCode").val();
                    id = "playTask";
                    break;
                case 2:
                    src = "../view/setstatus?stationCode="+$("#stationCode").val()+"&&transCode="+$("#transCode").val();
                    id = "setstatus";
                    break;
                case 3:
                    src = "../view/setfunction?stationCode="+$("#stationCode").val()+"&&transCode="+$("#transCode").val();
                    id = "setfunction";
                    break;
                case 4:
                    src = "../view/clock?stationCode="+$("#stationCode").val()+"&&transCode="+$("#transCode").val();
                    id = "clock";
                    break;
                default:
                    break;
            }
            createIframe(src,id);
        });

        function createIframe(src,id) {
            $("#"+id).empty();
            const iframe = document.createElement("iframe");
            //传入iframe的src
            iframe.src = src;
            iframe.width = "100%";
            iframe.height = "780px";
            iframe.frameborder = "none";
            iframe.setAttribute("frameborder", "0", 0);
            document.getElementById(id).appendChild(iframe);
        }
    })
</script>
</html>